<template>
  <div :style="{ height: kHOne + 'px' }">
    <!-- <el-button @click="isShow = !isShow">{{
      isShow ? '隐藏' : '显示'
    }}</el-button>
    <el-button @click="addData()">增加数据</el-button> -->
    <c-chart
      v-show="isShow"
      :options="options"
      @click="click"
      @dblclick="addData()"
      @mousedown="mousedown"
      @mousemove="mousemove"
      @mouseover="mouseover"
      @mouseout="mouseout"
      @globalout="globalout"
      @contextmenu="contextmenu"
      @chart="chart"
    />
  </div>
</template>

<script setup>
import CChart from "@/components/echarts/index";
import { ref, reactive } from "vue";

const options = ref({
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {},
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
      symbol: "none",
    },
  ],
});
const isShow = ref(true);
const addData = () => {
  options.value.xAxis.data.push(
    "test" + Math.random().toString(36).substring(2, 8)
  );
  options.value.series[0].data.push(Math.random() * 200);
};
const click = (e) => {
  console.log("click-----", e);
};
const mousedown = (e) => {
  //console.log('mousedown----//-', e)
};
const mousemove = (e) => {
  // console.log('mousemove-----', e)
};
const mouseover = (e) => {
  // console.log('mouseover-----', e)
};
const mouseout = (e) => {
  // console.log('mouseout-----', e)
};
const globalout = (e) => {
  console.log("globalout-----", e);
};
const contextmenu = (e) => {
  console.log("contextmenu-----", e);
};
onMounted(() => {
  getScreenHeight();
  getScreenWidth();
  // 页面大小改变时触发
  window.addEventListener("resize", getScreenHeight, false);
  // 页面大小改变时触发
  window.addEventListener("resize", getScreenWidth, false);
});
const chartRef = ref(null);
const chart = (dom) => {
  chartRef.value = dom;
};
//屏幕宽度
const screenWidth = ref(0);
const screenHeight = ref(0);
const kHOne = ref(400);
// 获取浏览器高度进行自适应
const getScreenHeight = () => {
  screenHeight.value =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight;
  // // 四舍五入取整数
  kHOne.value = Math.round(screenHeight.value * 0.45);
};
// 字体大小根据宽度自适应
const getScreenWidth = () => {
  screenWidth.value =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;
};
</script>

<style lang="scss" scoped></style>
